<template>
  <fullScreenContainer  type="fullScreenContainer" :leftList="leftList" :rightList="rightList" bgSelect="bg3"
    title="湖南省农业优势特色产业集群信息系统">
    <div slot="big-body" class="big-body" ref="allScreen">
      <div class="big-body-right">
        <div style="display:flex;width:100%">
        <div class="big-body-tab" style="flex-grow: 1;">
          <tabbtn v-for="item in tabs_list" :active="item.code === tabs_code" :key="item.code" :title="item.name"
            @click="click(item)"></tabbtn>
        </div>
        <div style="width:90px;">    
            <tabbtn title="保存图谱"  @click="saveImage()"></tabbtn>
        </div>
      </div>
        <div ref="industryMap" id="industryMap">
          <div class="big-right-header">
            {{title}}
          </div>
          <div class="big-right-ctx">
            <div class="tab1">
              <div class="tab1-item-1" style="position: relative;">
                <img :src="t1" alt="" />
                <div style="
                  top: 0px;
                  left: 32px;
                  width: 80%;
                  height: 36px;
                  align-items: center;
                  display: flex;
                  justify-content: space-between;
                  position: absolute;
                ">
                  <span>上游原材料</span>
                  <span>{{ syycl }}家</span>
                </div>
              </div>
              <div class="tab1-item-2" style="position: relative;">
                <img :src="t2" alt="" />
                <div style="
                  top: 0px;
                  left: 32px;
                  width: 91%;
                  height: 36px;
                  align-items: center;
                  display: flex;
                  justify-content: space-between;
                  position: absolute;
                ">
                  <span>中游加工生产</span>
                  <span>{{ zyjgsc }}家</span>
                </div>
              </div>
              <div class="tab1-item-3" style="position: relative;">
                <img :src="t3" alt="" />
                <div style="
                  top: 0px;
                  left: 32px;
                  width: 80%;
                  height: 36px;
                  align-items: center;
                  display: flex;
                  justify-content: space-between;
                  position: absolute;
                ">
                  <span>下游渠道市场</span>
                  <span>{{ xyqdsc }}家</span>
                </div>
              </div>
            </div>
            <div class="tab2">
              <div class="tab2-item-1">
                <div class="card-header">
                  <span>种植</span>
                </div>
                <div class="bg" style=" padding: 8px;display: flex;flex-direction: column;gap: 8px;">
                  <div class="card-1" v-for="item in zzList">
                    <span class="left">{{ item.content }}</span>
                    <span class="right">{{ item.area }}</span>
                  </div>
                </div>
              </div>
              <div class="tab2-item-2" style="display: flex;">
                <div class="tab2-left">
                  <div class="card-header" style="width: 300px;">
                    <span>企业</span>
                  </div>
                  <div class="bg" style="padding: 8px;display: flex;flex-direction: column;gap: 8px;">
                    <div class="card-1" style="width: 284px;" v-for="item in qyList">
                      <span class="left">{{ item.content }}</span>
                      <span class="right">{{ item.area }}</span>
                    </div>
                  </div>
                </div>
                <div class="tab2-right">
                  <div class="card-header" style="width: 300px;">
                    <span>初加工</span>
                  </div>

                  <div class="bg" style="padding: 8px;display: flex;flex-direction: column; gap: 8px;">
                    <div class="card-1" style="height: auto; width: 284px;" v-for="item in cjgList">
                      <span class="left">{{ item.content }}</span>
                    </div>
                  </div>
                  <div class="card-header" style="width: 300px;">
                    <span>精深加工</span>
                  </div>
                  <div style="padding: 8px;display: flex; flex-direction: column;gap: 8px;">
                    <div class="card-1"
                      style="gap: 8px;height: auto; width: 284px;justify-content: flex-start;flex-wrap: wrap;"
                      v-for="item in jsjgList">
                      <span class="left" style="width: 100%; display: inline-block;">
                        {{ item.content }}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="tab2-item-3">
                <div class="card-header">
                  <span>应用领域</span>
                </div>
                <div class="bg" style="padding: 8px;display: flex;flex-direction: column;gap: 8px;">
                  <div class="card-1" style="height: auto; width: 268px;" v-for="item in yylyList">
                    <span class="left">
                      {{ item.content }}
                    </span>
                  </div>
                </div>
                <div class="card-header">
                  <span>消费领域</span>
                </div>
                <div class="bg" style="padding: 8px;display: flex;flex-direction: column;gap: 8px;"
                  v-for="item in xflyList">
                  <div class="card-1" style="height: auto; width: 268px;">
                    <span class="left">
                      {{ item.content }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
            <div class="small-header">
              <div class="small-header-ctx">
                <span>
                  要素保障
                </span>
              </div>
            </div>
            <div class="tab3">
              <div class="tab3-item-1">
                <div class="card-header">
                  <span>科技支撑</span>
                </div>
                <div class="bg" style="padding: 8px;display: flex;flex-direction: column;gap: 8px;">
                  <div class="card-1" style="height: auto; width: 268px;" v-for="item in kjzcList">
                    <span class="left">
                      {{ item.content }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="tab3-item-2" style="gap: 0px;">
                <div class="tab3-card">
                  <span>品牌建设</span>
                </div>
                <div class="bg" style="padding: 8px;display: flex;flex-direction: column;gap: 8px;">
                  <div class="card-1" style="height: auto; width: 594px;" v-for="item in ppjsList">
                    <span class="left">
                      {{ item.content }}
                    </span>
                  </div>
                </div>
              </div>
              <div class="tab3-item-3" style="gap: 0px;">
                <div class="card-header">
                  <span>政策保障</span>
                </div>
                <div class="bg" style="padding: 8px; display: flex;flex-direction: column;gap: 8px;">
                  <div class="card-1" style="height: auto;" v-for="item in zcbzList">
                    <span class="left">
                      {{ item.content }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="big-left-ctx">
        <Panel height="100%" v-model="panel_value" :tabs="[{ name: '企业清单', value: '1' }]">
          <div class="left-form">
            <el-input v-model="form.company" placeholder="请输入企业名称"></el-input>
            <div style="display: flex; gap: 8px;">
              <div class="left-form-text">区域</div>
              <el-select style="width: 83.5px;" v-model="form.sq" placeholder="市">
                <!-- <el-option value="1" label="测试"></el-option> -->
              </el-select>
              <el-select style="width: 83.5px;" v-model="form.xq" placeholder="县">
                <!-- <el-option value="1" label="测试"></el-option> -->
              </el-select>
            </div>
          </div>
          <div class="left-list">
            <div class="left-item" v-for="item in companyList">
              <div class="item-title">
                <span>
                  {{ item.companyName }}
                </span>
              </div>
              <div class="item-ctx">
                <div class="item-1">
                  <span class="a">产业链节点：</span>
                  <div class="item-1-right">
                    <div>
                      <span>种植</span>
                    </div>
                    <div>
                      <span>加工</span>
                    </div>
                    <div>
                      <span>品牌运营</span>
                    </div>
                  </div>
                </div>
                <div class="item-1" style="gap: 6px; align-items: center;">
                  <div>
                    <span class="a">法人：</span>
                    <span class="a">{{ item.legalName }}</span>
                  </div>
                  <div class="line"></div>
                  <div>
                    <span class="a">注册资本：</span>
                    <span class="a">{{ item.registerFunds }}万元</span>
                  </div>
                  <div class="line"></div>
                  <div class="line"></div>
                  <div>
                    <span class="a">成立时间：</span>
                    <span class="a">{{ parseTime(item.registerTime, '{y}-{m}-{d}') }}</span>
                  </div>
                </div>
                <div class="item-1">
                  <span class="a">注册地址：</span>
                  <div class="item-1-right">
                    <span class="a">{{ item.address }}</span>
                  </div>
                </div>
              </div>
            </div>

          </div>
        </Panel>
      </div>
    </div>
  </fullScreenContainer>
</template>
<script>
import menuList, { rightList } from './menu'
import t1 from './t1.png'
import t2 from './t2.png'
import t3 from './t3.png'
import tabbtn from '../templateBigScreen1/tabbtn.vue'
import { parseTime } from '@/utils/ruoyi'
import { getChartData, ztyztqk, getCompanyList, getIndustryMapList } from "@/apis/bigOneIndex";
import html2canvas from "html2canvas"
export default {
  data() {
    return {
      leftList: menuList, parseTime,
      rightList,
      t1,
      t2,
      t3,
      panel_value: '1',
      form: {
        company: '',
        sq: '',
        xq: '',
      },
      tabs_code: '1',
      tabs_list: [
        {
          name: '五彩湘茶',
          code: '1'
        },
        {
          name: '早熟油菜',

          code: '2'
        },
        {
          name: '洞庭香米',
          code: '3'
        },
        {
          name: '中药材',
          code: '4'
        },
        {
          name: '柑橘产业',
          code: '5'
        },
      ],
      companyList: [],
      firstType: "五彩湘茶",
      syycl: 0,
      zyjgsc: 0,
      xyqdsc: 0,
      zzList: [],
      qyList: [],
      cjgList: [],
      jsjgList: [],
      yylyList: [],
      xflyList: [],
      kjzcList: [],
      ppjsList: [],
      zcbzList: [],
      title:"湖南省茶叶产业链图谱",
    }
  },
  components: {
    tabbtn
  },
  created() {
    this.getData();
  },
  methods: {
    click(v) {
      this.tabs_code = v.code;
      this.firstType = v.name;
      switch(this.tabs_code){
        case "1":this.title="湖南省茶叶产业链图谱";break;
        case "2":this.title="湖南省油菜产业链图谱";break;
        case "3":this.title="湖南省香米产业链图谱";break;
        case "4":this.title="湖南省中药材产业链图谱";break;
        case "5":this.title="湖南省柑橘产业链图谱";break;
      }
      this.getIndustryMapData();
    },
    getData() {
      this.getCompanyList();
      this.getIndustryMapData();
    },
    getCompanyList() {
      let params = { "pageNum": 1, "pageSize": 10, };
      getCompanyList(params).then(res => {

        this.companyList = res.rows;
      });
    },
    getIndustryMapData() {
      let params = { "firstType": this.firstType, };
      getIndustryMapList(params).then(res => {
        debugger
        let data = res.data;
        let data1 = data.filter(e => e.secondType == "上游原材料");
        if (data1.length > 0) {
          this.syycl = data1[0].area || 0;
        } else {
          this.syycl = 0;
        }
        let data2 = data.filter(e => e.secondType == "中游加工生产");
        if (data2.length > 0) {
          this.zyjgsc = data2[0].area || 0;
        } else {
          this.zyjgsc = 0;
        }
        let data3 = data.filter(e => e.secondType == "下游渠道市场");
        if (data3.length > 0) {
          this.xyqdsc = data3[0].area || 0;
        } else {
          this.xyqdsc = 0;
        }
        this.zzList = data.filter(e => e.secondType == "种植");

        this.qyList = data.filter(e => e.secondType == "企业");
        this.cjgList = data.filter(e => e.secondType == "初加工");
        this.jsjgList = data.filter(e => e.secondType == "精深加工");
        this.yylyList = data.filter(e => e.secondType == "应用领域");
        this.xflyList = data.filter(e => e.secondType == "消费领域");
        this.kjzcList = data.filter(e => e.secondType == "科技支撑");
        this.ppjsList = data.filter(e => e.secondType == "品牌建设");
        this.zcbzList = data.filter(e => e.secondType == "政策保障");
      });
    },
    saveImage(){debugger
      let that = this;
      let map =  document.createElement("div");
      let e = this.$refs.industryMap;
      map.innerHTML = e.innerHTML;
      let width = window.innerWidth;
      let s = (1920/width).toFixed(6);
      let ss = (width/1920).toFixed(6);
      map.style.tranform='scale('+s+')';
      map.style.width = "1920";
      map.className = "big-body-right";
      document.body.appendChild(map);
      html2canvas(map,
      { useCORS: true,
        allowTaint: true,
        removeContainer:true,
        backgroundColor:'#0f2626',
        //scale:ss
      }).then(canvas => {
        // this.$refs.addImage.append(canvas);//在下面添加canvas节点
        let link = document.createElement("a");
        link.href = canvas.toDataURL();//下载链接
        link.setAttribute("download","产业链图谱.png");
        link.style.display = "none";//a标签隐藏
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(map)
        document.body.removeChild(link)
      });
    },
  },
}
</script>
<style lang="scss">
.big-body-tab {
  display: flex;
  justify-content: center;
  gap: 22px;
}

.big-body {
  display: flex;
  gap: 32px;
  padding: 16px;
}

.big-body-right {
  width: 1376px;
  height: 966px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 16px;
  gap: 32px;
  flex-grow: 1;
  align-self: stretch;

  /* 背景渐变1 */
  background: linear-gradient(180deg,
      rgba(17, 77, 71, 0.3) 0%,
      rgba(22, 53, 50, 0.3) 100%);
  z-index: 0;

  .big-right-header {
    height: 45px;
    opacity: 1;
    margin-bottom: 30px;
    text-align: center;
    font-family: 思源黑体;
    font-size: 30px !important;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 3px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    z-index: 0;
  }

  .big-right-ctx {
    width: 1263px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    gap: 16px;

    box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);

    z-index: 1;
  }
}

.tab1 {
  width: 1263px;
  height: 36px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0px;
  gap: 16px;

  z-index: 0;

  span {
    opacity: 1;
    font-family: 思源黑体;
    font-size: 16px !important;
    font-weight: normal;
    line-height: normal;
    letter-spacing: 0em;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 文字白 */
    color: #ffffff;

    z-index: 0;
  }
}

.tab2 {
  display: flex;
  gap: 16px;

  .tab2-item-1 {
    width: 300px;
    height: 437px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 8px;
    align-self: stretch;

    box-sizing: border-box;
    /* 线条色 */
    border: 1px dashed #90cacc;

    z-index: 0;
  }

  .tab2-item-2 {
    width: 627px;
    height: 437px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: row;
    padding: 8px;
    gap: 8px 8px;
    flex-wrap: wrap;
    align-content: flex-start;

    box-sizing: border-box;
    /* 线条色 */
    border: 1px dashed #90cacc;

    z-index: 1;
  }

  .tab2-item-3 {
    width: 300px;
    height: 437px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 8px;
    align-self: stretch;

    box-sizing: border-box;
    /* 线条色 */
    border: 1px dashed #90cacc;

    z-index: 2;
  }
}

.small-header {
  display: flex;
  justify-content: center;

  .small-header-ctx {
    height: 36px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 48px;

    background: rgba(59, 214, 172, 0.27);

    z-index: 2;

    span {
      height: 24px;
      opacity: 1;

      font-family: 思源黑体;
      font-size: 16px !important;
      font-weight: 500;
      line-height: normal;
      letter-spacing: 0em;

      font-variation-settings: 'opsz' auto;
      font-feature-settings: 'kern' on;
      /* 文字白 */
      color: #ffffff;

      z-index: 0;
    }
  }
}

.tab3 {
  display: flex;
  gap: 16px;

  .tab3-item-1 {
    width: 300px;
    height: 209px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 8px;
    align-self: stretch;

    box-sizing: border-box;
    /* 线条色 */
    border: 1px dashed #90cacc;

    z-index: 0;
  }

  .tab3-item-2 {
    width: 626px;
    height: 209px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: row;
    padding: 8px;
    gap: 8px 8px;
    flex-wrap: wrap;
    align-content: flex-start;

    box-sizing: border-box;
    /* 线条色 */
    border: 1px dashed #90cacc;

    z-index: 1;
  }

  .tab3-item-3 {
    width: 300px;
    height: 209px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 8px;
    gap: 8px;
    align-self: stretch;

    box-sizing: border-box;
    /* 线条色 */
    border: 1px dashed #90cacc;

    z-index: 2;
  }
}

.card-header {
  width: 284px;
  height: 32px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 4px 8px;
  align-self: stretch;

  background: rgba(59, 214, 172, 0.15);

  z-index: 0;

  span {
    height: 24px;
    opacity: 1;

    font-family: 思源黑体;
    font-size: 16px !important;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 3px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 主色调 */
    color: #3bd6ac;

    z-index: 0;
  }
}

.card-1 {
  width: 268px;
  height: 29px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  gap: 22px;
  align-self: stretch;

  background: rgba(59, 214, 172, 0.3);

  z-index: 0;

  span.right {
    font-family: 思源黑体;
    font-size: 14px !important;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 主色调 */
    color: #3bd6ac;

    z-index: 1;
  }

  span.left {
    opacity: 1;

    font-family: 思源黑体;
    font-size: 14px !important;
    font-weight: 500;
    line-height: normal;
    letter-spacing: 0em;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 文字白 */
    color: #ffffff;

    z-index: 0;
  }
}

.text-span {
  height: 21px;
  opacity: 1;

  font-family: 思源黑体;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  letter-spacing: 0em;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  /* 主色调 */
  color: #3bd6ac;

  z-index: 1;
}

.bg {
  background: rgba(59, 214, 172, 0.08);
}

.tab3-card {
  width: 610px;
  height: 32px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 4px 8px;
  align-self: stretch;

  background: rgba(59, 214, 172, 0.15);

  z-index: 0;

  span {
    font-family: 思源黑体;
    font-size: 16px !important;
    font-weight: bold;
    line-height: normal;
    letter-spacing: 3px;

    font-variation-settings: 'opsz' auto;
    font-feature-settings: 'kern' on;
    /* 主色调 */
    color: #3bd6ac;

    z-index: 0;
  }
}

.big-left-ctx {
  width: 480px;
  height: 966px;
  border-radius: 5px;
  opacity: 1;

  /* 自动布局 */
  display: flex;
  flex-direction: column;
  padding: 0px 16px;
  gap: 24px;

  /* 背景渐变1 */
  background: linear-gradient(180deg,
      rgba(17, 77, 71, 0.3) 0%,
      rgba(22, 53, 50, 0.3) 100%);

  z-index: 1;

  .left-form {
    display: flex;
    gap: 24px;
    margin-top: 24px;
    align-items: center;

    .left-form-text {
      width: 32px;
      line-height: 32px;
      opacity: 1;
      font-family: Microsoft YaHei;
      font-size: 14px !important;
      font-weight: normal;
      letter-spacing: 0.56px;

      font-variation-settings: 'opsz' auto;
      /* 文字色 */
      color: #d0fff2;

      z-index: 1;
    }
  }
}

.left-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow:hidden;
  .left-item {
    width: 448px;
    height: 160px;
    opacity: 1;

    /* 自动布局 */
    display: flex;
    flex-direction: column;
    padding: 0px;
    align-self: stretch;

    z-index: 1;

    .item-title {
      width: 448px;
      height: 36px;
      opacity: 1;

      /* 自动布局 */
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 10px 16px;
      align-self: stretch;

      background: linear-gradient(270deg,
          rgba(59, 214, 172, 0.15) 2%,
          rgba(15, 179, 135, 0.15) 100%);

      z-index: 0;

      span {
        opacity: 1;

        font-family: 思源黑体;
        font-size: 16px !important;
        font-weight: bold;
        line-height: 16px !important;
        letter-spacing: 2px;

        background: linear-gradient(180deg, #d5fff5 15%, #8cd9c5 84%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        text-fill-color: transparent;
        z-index: 0;
      }
    }

    .item-ctx {
      padding: 16px;
      display: flex;
      flex-direction: column;
      gap: 16px;

      .item-1 {
        display: flex;

        span.a {
          /* 图表中文 */
          font-family: Source Han Sans CN;
          font-size: 14px !important;
          font-weight: 350;
          line-height: 20px !important;
          letter-spacing: 0em;

          /* 文字白 */
          color: #ffffff;

          z-index: 1;
        }

        .item-1-right {
          display: flex;
          gap: 8px;

          div {
            border-radius: 2px;
            opacity: 1;

            /* 自动布局 */
            display: flex;
            flex-direction: column;
            padding: 4px 8px;

            background: linear-gradient(0deg,
                rgba(255, 239, 9, 0.1) 0%,
                rgba(255, 245, 104, 0.1) 100%);

            z-index: 1;

            span {
              font-family: 思源黑体;
              font-size: 14px !important;
              font-weight: normal;
              line-height: 14px !important;
              letter-spacing: 0em;

              background: linear-gradient(0deg, #ffef09 0%, #fff568 100%);
              -webkit-background-clip: text;
              -webkit-text-fill-color: transparent;
              background-clip: text;
              text-fill-color: transparent;
              z-index: 0;
            }
          }
        }

        div.line {
          width: 18px;
          height: 0px;
          transform: rotate(90deg);
          opacity: 1;

          border-top: 1px solid rgba(255, 255, 255, 0.3);

          z-index: 1;
        }
      }
    }
  }
}
</style>
